<script setup lang="ts">
import {ColumnHeightOutlined, ReloadOutlined, SettingOutlined} from "@ant-design/icons-vue";
import {computed, h, reactive, ref, watch} from "vue";
import type {MenuProps} from "ant-design-vue";
import {JCrudColumnProps} from "./crud.ts";

defineOptions({
  name: "JCrudToolbar",
})
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  columns: {
    type: Array<JCrudColumnProps>,
    default: []
  }
})

const emits = defineEmits(['refresh', 'changeSize', 'changeColumns']);

const tableSize = ref<string[]>(["large"]);

const sizeItems = ref<MenuProps["items"]>([
  {
    key: "large",
    label: "宽松",
    title: "宽松",
  },
  {
    key: "middle",
    label: "中等",
    title: "中等",
  },
  {
    key: "small",
    label: "紧凑",
    title: "紧凑",
  },
]);

const dropdownVisible = ref(false)
const getCheckList = computed(() => props.columns.map(item => item.dataIndex))
const state = reactive({
  indeterminate: false,
  checkAll: true,
  checkList: getCheckList.value,
})

const options = computed(() => {
  return props.columns.map((item) => {
    if (item.dataIndex === 'action') {
      return {
        label: item.title,
        value: item.dataIndex,
        disabled: true,
      }
    }
    return {
      label: item.title,
      value: item.dataIndex,
    }
  })
})

function filterAction(value: string[]) {
  return props.columns.filter((item) => {
    return value.includes(item.dataIndex);
  })
}

const filterColumns = ref(filterAction(getCheckList.value))

watch(
    () => state.checkList,
    (val) => {
      state.indeterminate = !!val.length && val.length < getCheckList.value.length
      state.checkAll = val.length === getCheckList.value.length
    },
)

// 列：重置
function onChangeReset() {
  state.checkList = getCheckList.value
  filterColumns.value = filterAction(getCheckList.value)
  emits('changeColumns', filterColumns.value)
}

// 列：单选
function onChangeCheck(value: any) {
  filterColumns.value = filterAction(value)
  emits('changeColumns', filterColumns.value)
}

// 列：全选/反选
function onChangeCheckAll(e: any) {
  Object.assign(state, {
    checkList: e.target.checked ? getCheckList.value : [],
    indeterminate: true,
  })
  filterColumns.value = e.target.checked ? filterAction(getCheckList.value) : filterColumns.value.filter(item => item.dataIndex === 'action')
  emits('changeColumns', filterColumns.value)
}

const onChangeSize: MenuProps['onClick'] = (e) => {
  tableSize.value[0] = e.key as string
  emits('changeSize', tableSize.value[0])
}
</script>

<template>
  <a-space size="middle">
    <a-tooltip title="刷新">
      <a-button type="text" :icon="h(ReloadOutlined)" @click="emits('refresh')" size="small" :loading="loading"/>
    </a-tooltip>
    <a-tooltip title="密度">
      <a-dropdown trigger="click">
        <ColumnHeightOutlined/>
        <template #overlay>
          <a-menu
              v-model:selected-keys="tableSize"
              :items="sizeItems"
              @click="onChangeSize"
          />
        </template>
      </a-dropdown>
    </a-tooltip>
    <a-tooltip title="列设置">
      <a-dropdown v-model:open="dropdownVisible" trigger="click">
        <SettingOutlined/>
        <template #overlay>
          <a-card>
            <template #title>
              <a-checkbox
                  v-model:checked="state.checkAll"
                  :indeterminate="state.indeterminate"
                  @change="onChangeCheckAll"
              >
                列选择
              </a-checkbox>
            </template>
            <template #extra>
              <a-button type="link" @click="onChangeReset">
                重置
              </a-button>
            </template>
            <a-checkbox-group
                v-model:value="state.checkList"
                :options="options"
                style="display: flex; flex-direction: column"
                @change="onChangeCheck"
            />
          </a-card>
        </template>
      </a-dropdown>
    </a-tooltip>
  </a-space>
</template>

<style scoped>

</style>